import React from "react";
import "./NavigationBar.less";
import { View } from "@tarojs/components";
import { AtIcon } from "taro-ui";
import globalStore from "../state/globalData";
import "../fonts/remixicon.less";

const NavigationBar = props => {
  // console.log(props);
  return (
    <View
      className="navigation-wrap"
      style={{
        height: globalStore.navigationWrapHeight + "px",
        background: props.backgroundColor ? props.backgroundColor : "#ffffff00"
      }}
    >
      <View
        className="status-bar"
        style={{ height: globalStore.statusBarHeight + "px" }}
      />
      <View
        className="navigation-bar"
        style={{
          height: globalStore.navigationBarHeight + "px",
          lineHeight: globalStore.navigationBarHeight + "px",
          paddingLeft: globalStore.navigationLRPadding + "px",
          paddingRight: globalStore.navigationLRPadding + "px"
        }}
      >
        <View
          className="navigation-button-wrap"
          style={{
            height: globalStore.menuButtonHeight + 1 + "px",
            width: globalStore.menuButtonWidth + "px"
          }}
        >
          <View
            className="navigation-button"
            onClick={props.canBack() ? props.canBack() : null}
            style={{
              height: globalStore.menuButtonHeight + "px",
              width: globalStore.menuButtonHeight + "px",
              lineHeight: globalStore.menuButtonHeight + "px",
              display: props.button ? "block" : "none",
              background: props.buttonBGC
            }}
          >
            <AtIcon
              prefixClass={props.buttonIconType}
              value={props.buttonIcon}
              size={props.buttonIconSize}
              color={props.buttonIconColor}
            ></AtIcon>
          </View>
        </View>
        <View
          className="navigation-title"
          style={{
            fontSize: props.titleSize,
            fontWeight: props.titleWeight,
            width:
              globalStore.windowWidth -
              globalStore.menuButtonWidth * 2 -
              globalStore.navigationLRPadding * 2 +
              "px"
          }}
        >
          {props.navigationTitle}
        </View>
      </View>
    </View>
  );
};

export default NavigationBar;
